<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
   <title>自定义菜单</title>
	<%@ include file="/WEB-INF/layouts/edit-header.jsp" %>
   <style type="text/css">
		.menu-ul {
			color:#666;
			background:url(${staticPath}/wechat/image/bg_mobile_foot.png);
			margin:0px;
			padding:0px;
			position:absolute;
			bottom:0px;
			left:0px;
			right:0px;
			height:51px;
			padding-left:42px;
			list-style: none;
			-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
			border-top: 1px solid #e7e7eb;
		}
		.menu-ul>li:first-child {
			border-left: none;
		}
		.menu-ul>li {
			float:left;
			height:51px;
			line-height: 51px;
			text-align: center;
			border-left: 1px solid #e7e7eb;
			border-top: 1px solid #e7e7eb;
			cursor:pointer;
			position: relative;
			margin-top:-1px;
		}
	   .selected {
		   border:1px solid #44b549 !important;
		   color:#44b549;
	   }
	   .init-add {
		   width:100%;
	   }
	   .half-li {
		   width:50%;
	   }
	   .thirth-li {
		   width:33.3%;
	   }
	   .sub_menu {
		   display:none;
		   color:#666;
		   position: absolute;
		   left: 0px;
		   line-height: 0px;
		   bottom: 130%;
		   text-align: center;
		   background-color: #fafafa;
		   width:100%;
		   border: 1px solid #d0d0d0;
	   }
	   .sub_menu ul {
		   list-style-type: none;
		   width:100%;
		   margin:0px;
		   padding:0px;
	   }
		.sub_menu_li {
		   line-height: 40px;
		   border-top: 1px solid #d0d0d0;
	   }
		.sub_menu_li:hover {
			background:#FFF;
		}
		.sub_menu_li:first-child {
			border-top: none;
		}
	   .arrow {
		   position: absolute;
		   left: 50%;
		   margin-left: -6px;
	   }
		.arrow_in {
			bottom:-5px;
			display: inline-block;
			width: 0;
			height: 0;
			border-width: 6px;
			border-style: dashed;
			border-color: transparent;
			border-bottom-width: 0;
			border-top-color: #fafafa;
			border-top-style: solid;
		}
	   .arrow_out {
		   bottom:-6px;
		   display: inline-block;
		   width: 0;
		   height: 0;
		   border-width: 6px;
		   border-style: dashed;
		   border-color: transparent;
		   border-bottom-width: 0;
		   border-top-color: #d0d0d0;
		   border-top-style: solid;
	   }
		.mp-menu-add {
			background: url(${staticPath}/wechat/image/mp-menu-add.png) 0 0 no-repeat;
			width: 14px;
			height: 14px;
			vertical-align: middle;
			display: inline-block;
			margin-top: -2px;
		}
		.mp-menu-add-g {
			background:url(${staticPath}/wechat/image/mp-menu-add.png) 0 -18px no-repeat;
		}



	   .content>div {
		   background:#FFF;
		   border: 1px solid #e7e7eb;
		   display:none;
	   }
	   .content .nav {
		   list-style-type: none;
		   border-bottom:1px solid #e7e7eb;

	   }
	   .content .nav>li {
		   float:left;
		   padding:10px 20px;
		   cursor: pointer;
		   color:#8d8d8d;
	   }
	   .content .nav>li.nav-selected {
		   color:#000;
	   }
	   .content .box {
		   height:160px;
		   cursor:pointer;
		   border: 2px dotted #d9dadc;
		   text-align: center;
		   color: #d9dadc;
		   display: inline-block;
		   margin:20px;
	   }
		.content .box:hover {
			border-color: #b3b3b3;
			color:#b3b3b3;
		}
	   .nav-content>div {
		   display: none;
	   }
	   .menu-detail label {
		   font-weight: normal;
		   margin-right:10px;
	   }
	   .menu-detail .form-row {
		   padding-top:20px;
	   }
	   .micon-add {
		   background: url(${staticPath}/wechat/image/admin-wechat-menu-icon.png) 0 -2548px no-repeat;
		   line-height: 300px;
		   overflow: hidden;
		   width: 36px;
		   height: 36px;
		   vertical-align: middle;
		   display: inline-block;
	   }
	   .display {
		   vertical-align: middle;
		   margin-top:50px;
		   font-size: 14px;
		   text-align: center;
		   line-height: normal;
		   display: inline-block;
		   color:#8d8d8d;
	   }

		.tab_icon_doc {
			background: url(${staticPath}/wechat/image/wechat-menu-tab-icon.png) 0 -240px no-repeat;
		}
		.nav-selected .tab_icon_doc {
			background: url(${staticPath}/wechat/image/wechat-menu-tab-icon.png) 0 -270px no-repeat;
		}
		.tab_icon_pic {
			background: url(${staticPath}/wechat/image/wechat-menu-tab-icon.png) 0 -60px no-repeat;
		}
		.nav-selected .tab_icon_pic {
			background: url(${staticPath}/wechat/image/wechat-menu-tab-icon.png) 0 -90px no-repeat;
		}
		.tab_icon_voice {
			background: url(${staticPath}/wechat/image/wechat-menu-tab-icon.png) 0 -180px no-repeat;
		}
		.nav-selected .tab_icon_voice {
			background: url(${staticPath}/wechat/image/wechat-menu-tab-icon.png) 0 -210px no-repeat;
		}
		.tab_icon_video {
			background: url(${staticPath}/wechat/image/wechat-menu-tab-icon.png) 0 -120px no-repeat;
		}
		.nav-selected .tab_icon_video {
			background: url(${staticPath}/wechat/image/wechat-menu-tab-icon.png) 0 -150px no-repeat;
		}
		.tab_icon {
			margin-right: 3px;
			margin-top: -2px;
			width: 20px;
			height: 20px;
			vertical-align: middle;
			display: inline-block;
		}
		.h-form {
			padding:20px;
		}
		.h-form .control-label {
			width:80px;
		}
		.h-form .form-control {
			width:300px;
		}
		.h-form .form-group {
		   display:block !important;
		   padding-top:10px;
		   padding-bottom:10px;
	   }
   </style>
</head>
<body>

	<div class="tpanel">
		<div class="panel-content">
			<div class="container-fluid" style="padding-top:25px;">
				<div style="padding:20px;width:100%;position:relative;">
					<div style="position: relative;width:321px;height:500px;border: 1px solid #e7e7eb;">
						<div style="text-align:center;position: relative;width:320px;padding-top:20px;line-height:44px;height:64px;background:url(${staticPath}/wechat/image/bg_mobile_head.png);">
							<div style="color:white;font-size:15px;">微信公众号</div>
						</div>

						<ul class="menu-ul">
							<li class="selected init-add">
								<i class="mp-menu-add mp-menu-add-g"></i> 添加菜单
							</li>
						</ul>
					</div>
					<div class="menu-detail" style="position:absolute;left:360px;right:20px;top:20px;bottom:20px;padding:20px;background-color: #f4f5f9;border: 1px solid #e7e7eb;">
						<form class="form-inline">
						<%--<div style="margin:200px auto;width:140px;color:#999;">点击左侧菜单进行操作</div>--%>
							<div style="position:relative;border-bottom: 1px solid #DDD;height:30px;">
								<div style="display:inline-block;position:absolute;left:10px;">菜单名称</div>
								<a id="deleteMenu" style="cursor:pointer;display:inline-block;position:absolute;right:10px;">删除菜单</a>
							</div>
							<div id="menu-base" class="form-row" style="display: none;">
								<p>
									<label class="control-label">菜单名称</label>
									<input type="text" class="form-control" id="name" name="name" value="" onblur="enterName()" />
									<label class="control-label">KEY</label>
									<input type="text" class="form-control" id="key" name="key" value="" onblur="enterKey()" />
								</p>
							</div>
							<div id="panel-menu-edit" style="display: none;">
								<div class="form-row" style="font-size:14px;">
									<label>菜单内容</label>
									<label><input type="radio" name="type" checked value="media_id"/> 发送消息</label>
									<label><input type="radio" name="type" value="view"/> 跳转网页</label>
									<%--<label><input type="radio" name="type" value="miniprogram"/> 跳转小程序</label>--%>
									<label><input type="radio" name="type" value="otherType"/> 其他</label>
								</div>
								<div class="form-row content">
								<div style="display:block;">
									<div>
										<ul class="nav">
											<li class="nav-selected">
												<i class="tab_icon tab_icon_doc"></i>
												图文消息
											</li>
											<li>
												<i class="tab_icon tab_icon_pic"></i>
												图片
											</li>
											<li>
												<i class="tab_icon tab_icon_pic"></i>
												文字
											</li>
											<li>
												<i class="tab_icon tab_icon_voice"></i>
												语音
											</li>
											<li>
												<i class="tab_icon tab_icon_video"></i>
												视频
											</li>
										</ul>
										<div class="nav-content">
											<div style="display: block;" class="container-fluid">
												<div class="box col-xs-4">
													<div class="display">
														<i class="micon-add"></i><br/><br/>
														<span>从素材库中选择</span>
													</div>
												</div>
												<div class="box col-xs-4">
													<div class="display">
														<i class="micon-add"></i><br/><br/>
														<span>新建图文消息</span>
													</div>
												</div>
											</div>
											<div class="container-fluid">
												<div class="box col-xs-4">
													<div class="display">
														<i class="micon-add"></i><br/><br/>
														<span>从素材库中选择</span>
													</div>
												</div>
												<div class="box col-xs-4">
													<div class="display">
														<i class="micon-add"></i><br/><br/>
														<span>上传图片</span>
													</div>
												</div>
											</div>
											<div class="container-fluid" style="padding:30px;">
												<textarea class="form-control" style="width:100%;height:80px;">输入文字</textarea>
											</div>
											<div class="container-fluid">
												<div class="box col-xs-4">
													<div class="display">
														<i class="micon-add"></i><br/><br/>
														<span>从素材库中选择</span>
													</div>
												</div>
												<div class="box col-xs-4">
													<div class="display">
														<i class="micon-add"></i><br/><br/>
														<span>新建语音</span>
													</div>
												</div>
											</div>
											<div class="container-fluid">
												<div class="box col-xs-4">
													<div class="display">
														<i class="micon-add"></i><br/><br/>
														<span>从素材库中选择</span>
													</div>
												</div>
												<div class="box col-xs-4">
													<div class="display">
														<i class="micon-add"></i><br/><br/>
														<span>新建视频</span>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div>
									<div class="h-form">
									<div class="form-group form-group-first">
										<label class="control-label">网页地址</label>
										<input type="text" class="form-control" id="url" name="url" onblur="enterUrl()" value="" />
									</div>
									</div>
								</div>
								<div>
									<div class="h-form">
									<div class="form-group form-group-first">
										<label class="control-label">网页地址</label>
										<input type="text" class="form-control" id="miniUrl" name="miniUrl" value="" />
									</div>
									<div class="form-group form-group-first">
										<label class="control-label">APPID</label>
										<input type="text" class="form-control" id="miniAppid" name="miniAppid" value="" />
									</div>
									<div class="form-group form-group-first">
										<label class="control-label">页面路径</label>
										<input type="text" class="form-control" id="miniPagePath" name="miniPagePath" value="" />
									</div>
									</div>
								</div>
								<div>
									<div class="h-form">
									<div class="form-group form-group-first">
										<label class="control-label">菜单类型</label>
										<select id="otherType" name="otherType" onchange="switchOtherType()" class="form-control">
											<option value="click">点击菜单</option>
											<option value="scancode_waitmsg">扫码拉取消息</option>
											<option value="scancode_push">扫码推送</option>
											<option value="pic_sysphoto">弹出系统拍照发图</option>
											<option value="pic_photo_or_album">弹出拍照或相册发图</option>
											<option value="pic_weixin">弹出微信发图器</option>
											<option value="location_select">弹出地理位置选择</option>
										</select>
									</div>
									</div>
								</div>
							</div>
							</div>
							<div id="panel-parent" style="display: none;padding-top:20px;padding-left:10px;">
								父级菜单不允许编辑
							</div>
							<div id="panel-pls-add" style="padding-top:20px;padding-left:10px;">
								请添加菜单
							</div>
						</form>
					</div>

				</div>

				<div style="padding:20px;">
					<div style="width:321px;text-align:right;display: inline-block;">
						<button type="button" onclick="getFromMp()" title="获取微信服务器的线上公众号菜单" class="btn btn-default" style="margin-right:10px;">同步</button>
						<button type="button" class="btn btn-default" >菜单排序</button>
					</div>
					<div style="padding-left:20px;display: inline-block;">
						<button type="button" onclick="save()" title="保存菜单设置到本系统" class="btn btn-default" style="margin-right:10px;">保存</button>
						<button type="button" onclick="saveAndPublish()" title="保存菜单设置到本系统并发布到线上公众号" class="btn btn-primary">保存并发布</button>
					</div>
				</div>
			</div>
		</div>
	</div>


	<script type="text/javascript">
		changeTitle('自定义菜单');

		$(function() {

		    getFromServer();

            $('.menu-ul').delegate('.init-add','click', function() {
                addButton();
			});
			$('.menu-ul').delegate('.second-add','click',function () {
                addButton();
            });
            $('.menu-ul').delegate('.thirth-add','click',function () {
                addButton();
            });
            $('.menu-ul').delegate('.half-li,.thirth-li,.sub_menu_li','click',function() {
                if($(this).hasClass('add-submenu')) {
                    var parentId = $(this).parent().parent().parent().attr('id');
                    addButton(parentId);
                    return false;
                }
                switchButton($(this).attr('id'));
                return false;
			});
            $('#deleteMenu').click(function() {
                deleteButton(currentId);
			});
		});

		$(function() {
		    $('input[name="type"]').change(function() {
		        var val = $(this).val();
                $('.content>div').hide();
		        if(val == 'media_id') {
					$('.content>div').eq(0).show();
				}else if(val == 'view') {
                    $('.content>div').eq(1).show();
				}else if(val == 'miniprogram') {
                    $('.content>div').eq(2).show();
				}else if(val == 'otherType') {
                    $('.content>div').eq(3).show();
				}
                switchType();
			});
		    $('.content .nav>li').click(function() {
                $('.content .nav>li').removeClass('nav-selected');
		        $(this).addClass('nav-selected');
                $('.nav-content>div').hide();
                $('.nav-content>div').eq($(this).index()).show();
			});
		});

		var currentId;
		var createMenu = {button:[]};

		//	切换按钮
		function switchButton(id) {
            currentId = id;

            if(!$('#' + currentId).hasClass('sub_menu_li') && !$('#' + currentId).hasClass('selected')) {
                $('.menu-ul .sub_menu').hide();
                $('#' + currentId).find('.sub_menu').show();
            }
            $('.menu-ul li').removeClass('selected');
            $('#' + currentId).addClass('selected');

            var button = findById(createMenu.button, currentId);
            if(button.sub_button && button.sub_button.length > 0) {
                $('#menu-base').show();
                $('#panel-menu-edit').hide();
                $('#panel-parent').show();
                $('#panel-pls-add').hide();
			}else {
                $('#menu-base').show();
                $('#panel-menu-edit').show();
                $('#panel-parent').hide();
                $('#panel-pls-add').hide();
			}
            $('#name').val(button.name);
            $('#key').val(button.key);
            if(button.otherType) {
                $('#otherType').val(button.type);
                $('input[name="type"][value="otherType"]').click();
			}else {
                $('input[name="type"][value="' + button.type + '"]').click();
			}
            $('#url').val(button.url);
		}
        //	添加按钮
        function addButton(id,name) {
            var uuid = genUuid();
            currentId = uuid;
            var menuName = name ? name : id ? "子菜单名称" : "菜单名称";
            menuName = menuName.length > 5 ? menuName.substring(0,5) + '..' : menuName;
            var button = {id: uuid, name : menuName, type : "view", key : 'Default', parentId : id, url : 'http://'};
            if(id) {
				var parentButton = findById(createMenu.button, id);
				parentButton.type = 'click';
				parentButton.otherType = true;
				if(!parentButton.sub_button) {
                    parentButton.sub_button = [];
				}
                parentButton.sub_button.push(button);
			}else {
                createMenu.button.push(button);
			}

			//	添加按钮html
            if(id) {
                var ele = $('#' + id).find('.add-submenu').first();
                if(ele.parent().children('.sub_menu_li').length >= 5) {
                    ele.removeClass('add-submenu');
                    ele.html(menuName);
                    $('.menu-ul li').removeClass('selected');
                    ele.attr('id', uuid);
                }else {
                    var $li = $('<li id="' + uuid + '" class="sub_menu_li">' + menuName + '</li>');
                    ele.before($li);
                    $('.menu-ul li').removeClass('selected');
                }
                switchButton(uuid);
            }else {
                if($('.menu-ul>li').length == 1) {
                    var html = '';
                    html += '<li id="' + uuid + '" class="half-li"><span>' + menuName + '</span>' +
                        '<div class="sub_menu">' +
                        '<ul>' +
                        '<li class="sub_menu_li add-submenu"><i class="mp-menu-add"></i></li>' +
                        '</ul>' +
                        '<i class="arrow arrow_out"></i>' +
                        '<i class="arrow arrow_in"></i>' +
                        '</div>' +
                        '</li>';
                    html += '<li class="half-li second-add"><i class="mp-menu-add"></i></li>';
                    $('.menu-ul').html(html);
                    switchButton(uuid);
                }else if($('.menu-ul>li').length == 2) {
                    $('.menu-ul>li').removeClass('selected');
                    $('.menu-ul>li').removeClass('half-li');
                    $('.menu-ul .second-add').attr('id', uuid);
                    $('.menu-ul .second-add').html('<span>' + menuName + '</span>' +
                        '<div class="sub_menu">' +
                        '<ul>' +
                        '<li class="sub_menu_li add-submenu"><i class="mp-menu-add"></i></li>' +
                        '</ul>' +
                        '<i class="arrow arrow_out"></i>' +
                        '<i class="arrow arrow_in"></i>' +
                        '</div>');
                    $('.menu-ul .second-add').removeClass('second-add');
                    $('.menu-ul>li').addClass('thirth-li');
                    $('.menu-ul').append('<li class="thirth-li thirth-add"><i class="mp-menu-add"></i></li>');
                    switchButton(uuid);
				}else if($('.menu-ul>li').length == 3 && $('.menu-ul').children('.thirth-add').length) {
                    $('.menu-ul>li').removeClass('selected');
                    $('.menu-ul .thirth-add').attr('id', uuid);
                    $('.menu-ul .thirth-add').html('<span>' + menuName + '</span>'+
                        '<div class="sub_menu">' +
                        '<ul>' +
                        '<li class="sub_menu_li add-submenu"><i class="mp-menu-add"></i></li>' +
                        '</ul>' +
                        '<i class="arrow arrow_out"></i>' +
                        '<i class="arrow arrow_in"></i>' +
                        '</div>');
                    $('.menu-ul .thirth-add').removeClass('thirth-add');
                    switchButton(uuid);
				}
            }

			return uuid;
        }
        function findById(arr, id) {
            if(arr) {
                for(var i in arr) {
                    if(arr[i].id == id) {
                        return arr[i];
                    }
                    var b = findById(arr[i].sub_button, id);
                    if(b) return b;
                }
            }
		}
        //	删除指定按钮
        function deleteButton(id) {
            var nextId;
            if($('#' + id).hasClass('sub_menu_li')) {
                if($('#' + id).parent().children('.sub_menu_li').length == 5 &&
                    $('#' + id).parent().children('.add-submenu').length == 0) {
                    $('#' + id).parent().append('<li class="sub_menu_li add-submenu"><i class="mp-menu-add"></i></li>');
				}
                if($('#' + id).next().length && !$('#' + id).next().hasClass('add-submenu')) {
                    nextId = $('#' + id).next().attr('id');
				}else if($('#' + id).prev().length) {
                    nextId = $('#' + id).prev().attr('id');
				}else {
                    nextId = $('#' + id).parent().parent().parent().attr('id');
				}

            }else {
				if($('#' + id).parent().children().length == 3 && $('#' + id).parent().children('.thirth-add').length == 0) {
                    $('#' + id).parent().append('<li class="thirth-li thirth-add"><i class="mp-menu-add"></i></li>');
				}else if($('#' + id).parent().children().length == 3 && $('#' + id).parent().children('.thirth-add').length == 1) {
                    $('#' + id).parent().children('.thirth-add').addClass('second-add');
                    $('#' + id).parent().children('.thirth-add').removeClass('thirth-add');
                    $('#' + id).parent().children().removeClass('thirth-li');
                    $('#' + id).parent().children().addClass('half-li');
				}else if($('#' + id).parent().children().length == 2) {
                    $('#' + id).parent().children('.second-add').addClass('init-add');
                    $('#' + id).parent().children('.second-add').addClass('selected');
                    $('#' + id).parent().children('.second-add').append(' 添加菜单');
                    $('#' + id).parent().children('.second-add').children('.mp-menu-add').addClass('mp-menu-add-g');

                    $('#' + id).parent().children('.second-add').removeClass('half-li');
                    $('#' + id).parent().children('.second-add').removeClass('second-add');

                    $('#menu-base').hide();
                    $('#panel-menu-edit').hide();
                    $('#panel-parent').hide();
                    $('#panel-pls-add').show();
				}
				if($('#' + id).next().length && !$('#' + id).next().hasClass('thirth-add') && !$('#' + id).next().hasClass('second-add')) {
					nextId = $('#' + id).next().attr('id');
				}else if($('#' + id).prev().length) {
                    nextId = $('#' + id).prev().attr('id');
				}
            }
            $('#' + id).remove();
			mDeleteButton(createMenu.button, id);
            if(nextId) {
                switchButton(nextId);
            }
        }
        function mDeleteButton(arr, id) {
			if(arr) {
			    for(var i in arr) {
			        if(arr[i].id == id) {
			            arr.splice(i, 1);
			            break;
					}
                    mDeleteButton(arr[i].sub_button, id);
				}
			}
		}
        //	切换按钮类型
		function switchType() {
            var button = findById(createMenu.button, currentId);
            button.type = $('input:radio[name="type"]:checked').val();
            if(button.type == 'otherType') {
                button.otherType = true;
                button.type = $('#otherType').val();
			}else {
                button.otherType = false;
			}
        }
        function enterName() {
            var button = findById(createMenu.button, currentId);
            if(button.parentId) {
                if($('#name').val().length > 7) {
					$('#name').val($('#name').val().substring(0,7));
				}else if($('#name').val().length == 0) {
                    $('#name').val(button.name);
				}
            }else {
                if($('#name').val().length > 4) {
                    $('#name').val($('#name').val().substring(0,4));
                }else if($('#name').val().length == 0) {
                    $('#name').val(button.name);
                }
			}
            button.name = $('#name').val();
            if($('#' + currentId).hasClass('sub_menu_li')) {
                $('#' + currentId).text(button.name.length > 5 ? button.name.substring(0,5) + '..' : button.name);
			}else {
                $('#' + currentId).children('span').first().text(button.name);
			}
        }
        function save() {
            topLayer.load();
            $.ajax({
                type: "POST",
                url: '${ctx}/admin/wechat/menu/save/${currentWechatMpId}',
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(createMenu),
                dataType: "json",
                success: function (r) {
                    topLayer.closeAll('loading');
                    if (r.code == 'OK') {
                        topLayer.msg('保存成功', {icon: 1});
                    }else {
                        topLayer.msg(r.message, {icon: 2});
                    }
                },
                error: function (message) {
                    topLayer.closeAll('loading');
                    topLayer.msg('保存失败', {icon: 2});
                }
            });
        }
        function saveAndPublish() {
            topLayer.load();
            $.ajax({
                type: "POST",
                url: '${ctx}/admin/wechat/menu/save-and-publish/${currentWechatMpId}',
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(createMenu),
                dataType: "json",
                success: function (r) {
                    topLayer.closeAll('loading');
                    if (r.code == 'OK') {
                        topLayer.msg('发布成功', {icon: 1});
                    }else {
                        topLayer.msg(r.message, {icon: 2});
					}
                },
                error: function (message) {
                    topLayer.closeAll('loading');
                    topLayer.msg('发布失败', {icon: 2});
                }
            });
		}
        function enterUrl() {
		    if($('#url').val().length > 200) {
                $('#url').val($('#url').val().substring(0,200));
			}else if($('#url').val().length == 0) {
                $('#url').val('http://');
			}
            var button = findById(createMenu.button, currentId);
            button.url = $('#url').val();
		}
		function switchOtherType() {
            var button = findById(createMenu.button, currentId);
            button.type = $('#otherType').val();
		}
		function enterKey() {
            var button = findById(createMenu.button, currentId);
		    if($('#key').val().length == 0) {
                $('#key').val(button.key);
			}else if($('#key').val().length > 20) {
                $('#key').val($('#key').val().substring(0,20));
			}
            button.key = $('#key').val();
		}

        function genUuid() {
            var s = [];
            var hexDigits = "0123456789abcdef";
            for (var i = 0; i < 36; i++) {
                s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
            }
            s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
            s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
            s[8] = s[13] = s[18] = s[23] = "-";

            var uuid = s.join("");
            return uuid;
        }

        function initButton(m, pid) {
            for(var i in m) {
                var id = addButton(pid,m[i].name);
                var button = findById(createMenu.button, id);
                button.name = m[i].name;
                button.key = m[i].key;
                if(m[i].type != 'media_id' && m[i].type != 'miniprogram'
                    && m[i].type != 'view') {
                    button.otherType = true;
                    button.type = m[i].type;
                }else {
                    button.otherType = false;
                    button.type = m[i].type;
                }
                button.url = m[i].url;
                if(m[i].sub_button) {
                    initButton(m[i].sub_button, id);
                }
            }
        }
        function getFromServer() {
			$.get('${ctx}/admin/wechat/menu/get?wechatMpId=${currentWechatMpId}',function(r) {
				if(r.code == 'OK') {
					var m = r.body.button;
					if(m && m.length) {
						initButton(m);
						switchButton($('.menu-ul>li').first().attr('id'));
					}
				}else {
					alert(r.message);
				}
			},'json');
		}
		function clearAll() {
		    if(createMenu && createMenu.button) {
                var ids = new Array();
                for(var i in createMenu.button) {
                    ids.push(createMenu.button[i].id);
                }
                for(var j in ids) {
                    deleteButton(ids[j]);
				}
			}
            currentId = undefined;
		}
		function getFromMp() {
            topLayer.load();
            clearAll();
            $.get('${ctx}/admin/wechat/menu/get-from-mp?mpId=${currentMpId}',function(r) {
                topLayer.closeAll('loading');
                if(r.code == 'OK') {
                    var m = r.body.button;
                    if(m && m.length) {
                        initButton(m);
                        switchButton($('.menu-ul>li').first().attr('id'));
                    }
                }else {
                    topLayer.msg(r.message, {icon: 2});
                }
            },'json');
		}
	</script>

</body>
</html>